<template>
	<el-dialog title="导入表" v-model="visible" :width="550" destroy-on-close @closed="$emit('closed')">
		<el-header>
			<div class="right-panel">
				<div class="right-panel-search">
					<el-input v-model="search.tableName" placeholder="表名" clearable></el-input>
					<el-button type="primary" icon="el-icon-search" @click="upSearch">搜索</el-button>
				</div>
			</div>
		</el-header>
		<el-main class="nopadding">
			<scTable ref="table" :apiObj="dataList" size="small" row-key="id" @selection-change="selectionChange" hideDo stripe remoteSort remoteFilter>
				<el-table-column type="selection" width="50"></el-table-column>
				<el-table-column label="表名" prop="tableName" align="center" width="240"></el-table-column>
				<el-table-column label="表注释" prop="tableComment" align="center" min-width="200"></el-table-column>
			</scTable>
		</el-main>
		<template #footer>
			<el-button @click="visible=false">取 消</el-button>
			<el-button type="primary" :loading="isSaving" @click="submit()">导 入</el-button>
		</template>
	</el-dialog>
</template>

<script>
export default {
	emits: ['success', 'closed'],
	data() {
		return {
			visible: false,
			isSaving: false,
			// 表格数据
			dataList: this.$API.gen.table.pageDbTable,
			selection: [],
			search: {
				tableName: null
			},
			// 提交数据
			tables: []
		}
	},
	mounted() {
	},
	methods: {
		// 显示
		open() {
			this.visible = true;
			return this;
		},
		// 搜索
		upSearch() {
			this.$refs.table.upData(this.search);
		},
		// 表格选择后回调事件
		selectionChange(selection) {
			this.selection = selection;
		},
		// 表单提交
		submit() {
			if (this.selection.length === 0) {
				this.$message.error("请先选择要导入的表");
				return;
			}

			this.isSaving = true;
			this.selection.forEach(e => this.tables.push(e.tableName));
			this.$API.gen.table.import.post({tables: this.tables}).then(() => {
				this.$emit('success');
				this.visible = false;
				this.$message.success("导入成功");
			}).catch(() => {
				this.isSaving = false;
			});
		}
	}
}
</script>

<style>
</style>
